<template>
  <div class="app-container">

    <!--  1-搜索框             -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" >

        <el-form-item>
          <el-input placeholder="品种ID" v-model="searchName"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="doFilter()"><i class="el-icon-search"></i>搜索</el-button>
        </el-form-item>


        <!-- 新增品种条目信息按钮  -->
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="addLocalSpecies()">新增</el-button>-->
<!--        </el-form-item>-->

      </el-form>
    </el-col>

    <!-- 2-列表              -->
    <el-table :data="tableList" max-height="550" v-loading="listLoading" border element-loading-text="拼命加载中" style="width: 100%;">

      <el-table-column prop="speciesId" label="品种ID" ></el-table-column>
      <el-table-column prop="testId" label="试验ID" ></el-table-column>
      <el-table-column prop="experimentType" label="试验类型" ></el-table-column>


      <el-table-column prop="operation" label="操作 ">
        <template slot-scope="scope">


          <!--<el-button size="mini" type="success" @click="getInSpeciesDetail(scope.row)">进入</el-button>-->
          <el-button size="mini" type="success" @click="getInSpeciesDetail(scope.row)">进入</el-button>

<!--          <el-button size="small" type="danger" @click="deleteUpdate(scope.row)">删除</el-button>-->

        </template>
      </el-table-column>

    </el-table>


    <!--  3-分页插件的工具条                 -->
    <el-pagination layout="total, prev, pager, next"
                   background
                   :page-size="10"
                   @size-change="handleSizeChange"
                   :total="total"
                   @current-change="handleCurrentChange"
                   style="text-align:center;">
    </el-pagination>

    <!-- 5-新增品种弹窗详情 -->
    <el-dialog title="Edit1" :visible.sync="isShowAddVisible">

      <el-form label-width="80px" :model="localSpeciesMsg" ref="dataForm">
        <el-form-item label="品种ID" prop="fname">
          <el-input v-model="localSpeciesMsg.speciesId"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowAddVisible = false">取消</el-button>
        <el-button type="primary" :loading="listLoading" @click="addSumbit(localSpeciesMsg)" class="title1">确定</el-button>
      </div>

    </el-dialog>

    <!-- 6-删除本地品种资源库弹框                           -->
    <el-dialog
      title="删除"
      :visible.sync="deleteVisible"
      width="30%">
      <span>确认删除吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDelete">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>


<script>
  import { addLocalSpecies, getLocalSpecies, deleteLocalSpecies, updateSpeciesPic } from '../../api/SpeciesManage'
  import { getCommontestList } from '../../api/commontestManage'
  import { getSpeciesCommontestList } from '../../api/speciesCommontestManage'

  export default {

    data() {
      return {

        tableList: [],
        totalData: [],
        listLoading: true,
        isShowEditVisible: false,
        isShowAddVisible: false,
        deleteVisible: false,
        temp: {
          uid: '',
          cname: '',
          date: '',
          status: ''
        },
        localSpeciesMsg: {
          speciesId: '',
        },
        total: 0,
        page: 1,
        pageSize: 10,
        status: [
          {
            statusId: 1,
            label: '启用'
          }, {
            statusId: 0,
            label: '禁用'
          }
        ],

        value: '',
        searchName: '',
        filterTableDataEnd: []
      }
    },

    created() {
      // 刚打开页面时就去取数据；
      this.fetchData()
    },

    filters: {
      statusFilter(status) {
        const statusMap = {
          1: 'success',
          2: 'danger'
        }
        return statusMap[status]
      }
    },

    methods: {

      // 新增localSpecies更新数据
      addSumbit( localSpeciesMsg ) {
        this.listLoading = true
        addLocalSpecies({ 'speciesId': localSpeciesMsg.speciesId }).then(response => {
          if (response.data.success === true) {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 5000
            })
          } else {
            this.$notify({
              title: '失败',
              message: response.data.msg,
              type: 'failure',
              duration: 5000
            })
          }
          this.fetchData()
        })
        this.isShowAddVisible = false
      },

      getInShotList( farmland ) {
        this.GLOBAL.farmland = farmland
        console.log(farmland)
        this.$router.push('/browser')
      },
      getInSpeciesDetail(species) {
        // this.GLOBAL.species.speciesId = species.speciesId
        // console.log('AAAAAA' + species.speciesId)
        // this.$router.push('/speciesmodule/speciesdetail')

        this.GLOBAL.species.testId = species.testId
        console.log('AAAAAAA' + species.testId )
        this.$router.push('/commontest')
      },

      fetchData() {
        this.listLoading = true
        getCommontestList({'speciesId': this.GLOBAL.species.speciesId }).then(response => {

          const limit = 10
          // 居然在前端做筛选，牛逼！
          this.totalData = response.data.rows
          const pageList = response.data.rows.filter((item, index) => index < limit * this.page && index >= limit * (this.page - 1))
          // console.log(pageList)
          this.total = response.data.total
          this.tableList = pageList
          this.listLoading = false
        })
      },

      doFilter() {
        if (this.searchName === '') {
          this.fetchData()
          this.$message.warning('查询条件不能为空！')
          return
        }
        console.log(this.searchName)

        this.listLoading = true
        getLocalSpecies({ 'speciesId': this.searchName }).then(response => {
          const limit = 10
          // 居然在前端做筛选，牛逼！
          const pageList = response.data.rows.filter((item, index) => index < limit * this.page && index >= limit * (this.page - 1))
          // console.log(pageList)
          this.total = response.data.total
          this.tableList = pageList
          this.listLoading = false
        })
      },

      clickfun(e) {
        console.log(e.target.innerText)
      },

      handleUpdate(row) {
        this.isShowEditVisible = true
        this.temp = Object.assign({}, row)
        console.log(row)
      },

      addLocalSpecies() {
        this.isShowAddVisible = true
        console.log()
      },

      deleteUpdate(row) {
        console.log(row)
        this.deleteVisible = true
        this.temp = Object.assign({}, row)
        this.speciesId = row.speciesId
      },

      submitDelete() {
        const tempData = Object.assign({}, this.temp)
        console.log(tempData)
        console.log(this.tableList)
        for (const v of this.tableList) {
          if (v.uid === this.temp.uid) {
            const index = this.tableList.indexOf(v)
            this.tableList.splice(index, 1)
            this.fetchData()
            console.log(this.tableList)
            break
          }
        }
        deleteLocalSpecies({ 'localSpeciesId': this.speciesId }).then(response => {
          this.fetchData()
        })

        this.deleteVisible = false
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      },

      handlePicUploadSuccess(res, file) {
        console.log(res)
        console.log(file)

        updateSpeciesPic()
        this.curSpecies.img1 = res.msg
        this.speciesImgs.img1 = this.GLOBAL.nginxPath + this.curSpecies.img1
        console.log(this.curSpecies.img1)
      },

      handleModifyStatus(row, status) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        console.log(row)
        row.status = status
      },

      updateData() {
        const tempData = Object.assign({}, this.temp)
        console.log(tempData)
        updateArticle(tempData).then(() => {
          for (const v of this.tableList) {
            if (v.uid === this.temp.uid) {
              const index = this.tableList.indexOf(v)
              this.tableList.splice(index, 1, this.temp)
              break
            }
          }
          this.isShowEditVisible = false
          this.$notify({
            title: '成功',
            message: '更新成功',
            type: 'success',
            duration: 2000
          })
        })
      },

      handleSizeChange(val) {
        this.page = val
        console.log(this.page)
        this.fetchData()
      },

      handleCurrentChange(val) {
        this.page = val
        console.log(this.page)
        this.fetchData()
      },

      currentChangePage(list) {
        let from = (this.page - 1) * this.pageSize
        const to = this.page * this.pageSize
        this.tableList = []
        for (; from < to; from++) {
          if (list[from]) {
            this.tableList.push(list[from])
          }
        }
      }


    }
  }

</script>

